<template>
  <div class="emoji_box">
    <div class="emoji">
      <img @click="addEmoji" v-for="(item,index) in emoji" :src="require('@/assets/image/emoji/' + item)" :key="index" :alt="item">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Emoji',

  data() {
    return {
      // 表情图片数据
      emoji: ['aini.gif', 'baibai.gif', 'baiyan.gif', 'baobao.gif', 'beishang.gif', 'bishi.gif', 'bizui.gif', 'caonima.gif', 'chanzui.gif', 'chijing.gif', 'dangao.gif', 'fahongbao.gif', 'fennu.gif', 'fuyun.gif', 'ganmao.gif', 'geili.gif', 'good.gif', 'guzhang.gif', 'haha.gif', 'haixiu.gif', 'han.gif', 'haqian.gif', 'heixian.gif', 'heng.gif', 'huatong.gif', 'hufen.gif', 'jiong.gif', 'jiyan.gif', 'keai.gif', 'kelian.gif', 'ku.gif', 'kun.gif', 'lai.gif', 'lazhu.gif', 'lei.gif', 'no.gif', 'nu.gif', 'numa.gif', 'ok.gif', 'qian.gif', 'qinqin.gif', 'ruo.gif', 'se.gif', 'shangxin.gif', 'shengbing.gif', 'shenma.gif', 'shiwang.gif', 'shuai.gif', 'shudaizi.gif', 'shui.gif', 'sikao.gif', 'taikaixin.gif', 'touxiao.gif', 'tu.gif', 'tuzi.gif', 'wabi.gif', 'weiguan.gif', 'weiqu.gif', 'weiwu.gif', 'weixiao.gif', 'xin.gif', 'xiongmao.gif', 'xixi.gif', 'xu.gif', 'ye.gif', 'yinxian.gif', 'yiwen.gif', 'youhengheng.gif', 'yun.gif', 'zan.gif', 'zhu.gif', 'zhuakuang.gif', 'zuohengheng.gif'],
    };
  },

  methods: {
    // 添加表情
    addEmoji(e){
      this.$emit('addEmoji',e.target.src)
    }
  },
};
</script>

<style scoped>
.emoji_box{
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
  border: 1px solid gray;
  box-shadow: 0 0 4px gray;
  background-color: white;
  z-index: 9999;
}
.emoji{
  position: absolute;
  top: 0;
  left: 17px;
  width: 300px;
  height: 100px;
  overflow: auto;
}
.emoji img{
  cursor: pointer;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
}
</style>